<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李婷婷生日快乐 | 国庆中秋双节同庆</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'KaiTi', '楷体', serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }

        /* 星空背景 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        /* 主容器 */
        .container {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
        }

        /* 标题区域 */
        .title-section {
            text-align: center;
            padding: 40px 20px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .main-title {
            font-size: 48px;
            margin-bottom: 20px;
            animation: fadeInDown 1s ease-out;
        }

        .subtitle {
            font-size: 24px;
            margin-bottom: 10px;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 诗词卡片 */
        .poetry-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            margin: 30px auto;
            max-width: 600px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            animation: fadeIn 1s ease-out 0.6s both;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .poetry-title {
            font-size: 28px;
            color: #c41e3a;
            text-align: center;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .poetry-line {
            font-size: 20px;
            line-height: 2;
            color: #333;
            text-align: center;
            margin: 10px 0;
        }

        /* 互动区域 */
        .interactive-section {
            position: relative;
            min-height: 500px;
            margin-top: 40px;
        }

        /* 月亮 */
        .moon {
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle at 30% 30%, #fff9e6, #ffd700);
            border-radius: 50%;
            box-shadow: 0 0 60px rgba(255, 215, 0, 0.6);
            cursor: move;
            top: 50px;
            right: 100px;
            transition: transform 0.3s;
            z-index: 10;
        }

        .moon:hover {
            transform: scale(1.1);
        }

        .moon::before {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            top: 20%;
            left: 25%;
        }

        .moon::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            top: 50%;
            left: 60%;
        }

        /* 灯笼 */
        .lantern-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 40px;
            gap: 30px;
        }

        .lantern {
            width: 80px;
            height: 100px;
            background: linear-gradient(to bottom, #ff0000, #cc0000);
            border-radius: 40px 40px 20px 20px;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s;
            box-shadow: 0 5px 20px rgba(255, 0, 0, 0.4);
            animation: swing 3s ease-in-out infinite;
        }

        @keyframes swing {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }

        .lantern:hover {
            transform: scale(1.2) rotate(0deg) !important;
        }

        .lantern::before {
            content: '福';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: gold;
            font-size: 32px;
            font-weight: bold;
        }

        .lantern::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 15px;
            background: #ffaa00;
            border-radius: 50%;
        }

        .lantern-top {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 10px;
            background: #ffaa00;
            border-radius: 50%;
        }

        /* 烟花容器 */
        .fireworks-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            animation: explode 1s ease-out forwards;
        }

        @keyframes explode {
            0% {
                transform: translate(0, 0);
                opacity: 1;
            }
            100% {
                transform: translate(var(--x), var(--y));
                opacity: 0;
            }
        }

        /* 按钮 */
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 15px 40px;
            font-size: 18px;
            background: linear-gradient(45deg, #ff6b6b, #ee5a6f);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(238, 90, 111, 0.4);
            transition: all 0.3s;
            font-family: 'KaiTi', '楷体', serif;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(238, 90, 111, 0.6);
        }

        .btn:active {
            transform: translateY(-1px);
        }

        /* 祝福消息弹窗 */
        .blessing-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 50px rgba(0,0,0,0.3);
            z-index: 2000;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
            text-align: center;
            transition: transform 0.3s;
        }

        /* 自定义滚动条 */
        .blessing-popup::-webkit-scrollbar {
            width: 8px;
        }

        .blessing-popup::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .blessing-popup::-webkit-scrollbar-thumb {
            background: #c41e3a;
            border-radius: 4px;
        }

        .blessing-popup::-webkit-scrollbar-thumb:hover {
            background: #a01729;
        }

        /* 祝福弹窗背景遮罩 */
        .blessing-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .blessing-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .blessing-popup.active {
            transform: translate(-50%, -50%) scale(1);
        }

        .blessing-popup h2 {
            color: #c41e3a;
            margin-bottom: 20px;
            font-size: 28px;
        }

        .blessing-popup p {
            color: #333;
            font-size: 18px;
            line-height: 1.8;
            margin: 15px 0;
        }

        .close-btn {
            margin-top: 20px;
            padding: 10px 30px;
            background: #c41e3a;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
        }

        /* 音乐控制 */
        .music-control {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            z-index: 100;
            transition: all 0.3s;
        }

        .music-control:hover {
            transform: scale(1.1);
        }

        .music-icon {
            font-size: 24px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-title {
                font-size: 32px;
            }
            .subtitle {
                font-size: 18px;
            }
            .poetry-card {
                padding: 20px;
                margin: 20px 10px;
            }
            .poetry-line {
                font-size: 16px;
            }
            .moon {
                width: 100px;
                height: 100px;
                right: 20px;
            }
            .lantern {
                width: 60px;
                height: 75px;
            }
            
            /* 移动端祝福弹窗优化 */
            .blessing-popup {
                padding: 20px;
                margin: 20px;
                max-width: calc(100vw - 40px);
                max-height: 80vh;
                width: auto;
                left: 20px;
                right: 20px;
                transform: translateY(-50%) scale(0);
            }
            
            .blessing-popup.active {
                transform: translateY(-50%) scale(1);
            }
            
            .blessing-popup h2 {
                font-size: 24px;
                margin-bottom: 15px;
            }
            
            .blessing-popup p {
                font-size: 16px;
                line-height: 1.6;
                margin: 12px 0;
            }
        }

        /* 国旗元素 */
        .flag-element {
            position: absolute;
            width: 60px;
            height: 40px;
            background: linear-gradient(to bottom, #de2910, #de2910);
            box-shadow: 0 3px 10px rgba(0,0,0,0.3);
            animation: wave 2s ease-in-out infinite;
        }

        @keyframes wave {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(2deg); }
        }

        .flag-1 { top: 100px; left: 50px; animation-delay: 0s; }
        .flag-2 { top: 150px; right: 50px; animation-delay: 0.5s; }
        .flag-3 { bottom: 200px; left: 80px; animation-delay: 1s; }

        .star-flag {
            position: absolute;
            color: #ffde00;
            font-size: 12px;
            top: 5px;
            left: 5px;
        }

        /* 蛋糕 */
        .cake {
            margin: 40px auto;
            width: 200px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .cake:hover {
            transform: scale(1.05);
        }

        .cake-layer {
            width: 200px;
            height: 40px;
            background: linear-gradient(to bottom, #ff69b4, #ff1493);
            border-radius: 10px;
            margin: 5px 0;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }

        .cake-layer:nth-child(2) {
            width: 180px;
            margin-left: 10px;
            background: linear-gradient(to bottom, #ffb6c1, #ff69b4);
        }

        .cake-layer:nth-child(3) {
            width: 160px;
            margin-left: 20px;
            background: linear-gradient(to bottom, #ffc0cb, #ffb6c1);
        }

        .candle {
            display: inline-block;
            width: 8px;
            height: 30px;
            background: linear-gradient(to bottom, #fff, #ffe4e1);
            margin: 0 5px;
            position: relative;
            border-radius: 4px;
        }

        .flame {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 18px;
            background: radial-gradient(circle, #ffff00, #ff6600);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            animation: flicker 0.5s infinite alternate;
        }

        @keyframes flicker {
            0% { transform: translateX(-50%) scale(1); }
            100% { transform: translateX(-50%) scale(1.1); }
        }

        .candles {
            margin-top: -15px;
            margin-bottom: 10px;
        }

        /* 惊喜特效动画 */
        @keyframes fallDown {
            0% {
                transform: translateY(-50px) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes rainbowAppear {
            0% {
                opacity: 0;
                transform: translateX(-50%) scale(0.5);
            }
            50% {
                opacity: 0.8;
                transform: translateX(-50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateX(-50%) scale(1.2);
            }
        }

        @keyframes textFloat {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            20% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
            80% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8) translateY(-50px);
            }
        }

        @keyframes messageAppear {
            0% {
                opacity: 0;
                transform: translateX(-50%) translateY(-20px);
            }
            20% {
                opacity: 1;
                transform: translateX(-50%) translateY(0px);
            }
            80% {
                opacity: 1;
                transform: translateX(-50%) translateY(0px);
            }
            100% {
                opacity: 0;
                transform: translateX(-50%) translateY(20px);
            }
        }
    </style>
</head>
<body>
    <!-- 星空背景 -->
    <div class="stars" id="stars"></div>
    
    <!-- 烟花容器 -->
    <div class="fireworks-container" id="fireworks"></div>

    <!-- 国旗元素（中国五星红旗风格） -->
    <div class="flag-element flag-1">
        <span class="star-flag" style="font-size:22px; position:absolute; top:4px; left:6px; transform:rotate(-20deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:2px; left:32px; transform:rotate(20deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:12px; left:40px; transform:rotate(40deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:26px; left:38px; transform:rotate(0deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:34px; left:28px; transform:rotate(-20deg);">★</span>
    </div>
    <div class="flag-element flag-2">
        <span class="star-flag" style="font-size:22px; position:absolute; top:4px; left:6px; transform:rotate(-20deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:2px; left:32px; transform:rotate(20deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:12px; left:40px; transform:rotate(40deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:26px; left:38px; transform:rotate(0deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:34px; left:28px; transform:rotate(-20deg);">★</span>
    </div>
    <div class="flag-element flag-3">
        <span class="star-flag" style="font-size:22px; position:absolute; top:4px; left:6px; transform:rotate(-20deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:2px; left:32px; transform:rotate(20deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:12px; left:40px; transform:rotate(40deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:26px; left:38px; transform:rotate(0deg);">★</span>
        <span class="star-flag" style="font-size:8px; position:absolute; top:34px; left:28px; transform:rotate(-20deg);">★</span>
    </div>

    <!-- 主容器 -->
    <div class="container">
        <!-- 标题 -->
        <div class="title-section">
            <h1 class="main-title">🎂 李婷婷生日快乐 🎉</h1>
            <p class="subtitle">国庆中秋双节同庆</p>
            <p class="subtitle">愿君如月满，岁岁享安康</p>
        </div>

        <!-- 诗词卡片 -->
        <div class="poetry-card">
            <h2 class="poetry-title">《贺婷婷芳辰》</h2>
            <p class="poetry-line">国庆逢佳节，中秋月正圆。</p>
            <p class="poetry-line">婷婷如玉立，才学比神仙。</p>
            <p class="poetry-line">诗书浸墨香，文采溢华年。</p>
            <p class="poetry-line">愿君福寿长，岁岁乐无边。</p>
            <p class="poetry-line" style="margin-top: 30px; font-size: 16px; color: #666;">—— 特献于国庆佳诞</p>
            <p class="poetry-line" style="margin-top: 10px; font-size: 15px; color: #888;">👇 往下滑动还有更多精彩内容哦！</p>
        </div>

        <!-- 蛋糕 -->
        <div class="cake" onclick="blowCandles()">
            <div class="candles">
                <span class="candle"><span class="flame"></span></span>
                <span class="candle"><span class="flame"></span></span>
                <span class="candle"><span class="flame"></span></span>
            </div>
            <div class="cake-layer"></div>
            <div class="cake-layer"></div>
            <div class="cake-layer"></div>
            <p style="margin-top: 10px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">点击蛋糕许愿 🎂</p>
        </div>

        <!-- 互动区域 -->
        <div class="interactive-section">
            <!-- 可拖动的月亮 -->
            <div class="moon" id="moon" title="拖动月亮试试"></div>

            <!-- 灯笼 -->
            <div class="lantern-container">
                <div class="lantern" onclick="showBlessing(1)">
                    <div class="lantern-top"></div>
                </div>
                <div class="lantern" onclick="showBlessing(2)">
                    <div class="lantern-top"></div>
                </div>
                <div class="lantern" onclick="showBlessing(3)">
                    <div class="lantern-top"></div>
                </div>
                <div class="lantern" onclick="showBlessing(4)">
                    <div class="lantern-top"></div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button class="btn" onclick="createFireworks()">🎆 绚烂烟花</button>
            <button class="btn" onclick="showAllBlessings()">💝 查看祝福</button>
            <button class="btn" onclick="createRandomFireworks()">✨ 浪漫惊喜</button>
        </div>
    </div>

    <!-- 祝福弹窗背景遮罩 -->
    <div class="blessing-overlay" id="blessingOverlay" onclick="closeBlessing()"></div>
    
    <!-- 祝福弹窗 -->
    <div class="blessing-popup" id="blessingPopup">
        <h2 id="blessingTitle"></h2>
        <div id="blessingContent"></div>
        <button class="close-btn" onclick="closeBlessing()">收到祝福</button>
    </div>

    <!-- 音乐控制 -->
    <div class="music-control" onclick="toggleMusic()" title="点击播放/暂停音乐">
        <span class="music-icon">🎵</span>
    </div>

    <script>
        // 创建星空
        function createStars() {
            const starsContainer = document.getElementById('stars');
            for (let i = 0; i < 100; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.width = Math.random() * 3 + 1 + 'px';
                star.style.height = star.style.width;
                star.style.animationDelay = Math.random() * 3 + 's';
                starsContainer.appendChild(star);
            }
        }

        // 月亮拖动功能
        let isDragging = false;
        let currentX;
        let currentY;
        let initialX;
        let initialY;

        const moon = document.getElementById('moon');

        moon.addEventListener('mousedown', dragStart);
        moon.addEventListener('touchstart', dragStart);

        document.addEventListener('mousemove', drag);
        document.addEventListener('touchmove', drag);

        document.addEventListener('mouseup', dragEnd);
        document.addEventListener('touchend', dragEnd);

        function dragStart(e) {
            if (e.type === 'touchstart') {
                initialX = e.touches[0].clientX - moon.offsetLeft;
                initialY = e.touches[0].clientY - moon.offsetTop;
            } else {
                initialX = e.clientX - moon.offsetLeft;
                initialY = e.clientY - moon.offsetTop;
            }

            if (e.target === moon) {
                isDragging = true;
            }
        }

        function drag(e) {
            if (isDragging) {
                e.preventDefault();
                
                if (e.type === 'touchmove') {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                moon.style.left = currentX + 'px';
                moon.style.top = currentY + 'px';
                moon.style.right = 'auto';
            }
        }

        function dragEnd() {
            isDragging = false;
        }

        // 烟花效果 - 连续3发不同颜色的烟花
        function createFireworks() {
            const container = document.getElementById('fireworks');
            
            // 连续发射3发烟花
            for (let round = 0; round < 3; round++) {
                setTimeout(() => {
                    const x = Math.random() * window.innerWidth;
                    const y = Math.random() * (window.innerHeight / 2);

                    const colorSets = [
                        ['#ff0000', '#ff4444', '#ff8888'], // 红色系
                        ['#00ff00', '#44ff44', '#88ff88'], // 绿色系
                        ['#0000ff', '#4444ff', '#8888ff'], // 蓝色系
                        ['#ffff00', '#ffff44', '#ffff88'], // 黄色系
                        ['#ff00ff', '#ff44ff', '#ff88ff'], // 紫色系
                    ];
                    const colorSet = colorSets[Math.floor(Math.random() * colorSets.length)];

                    // 每发烟花有更多粒子和层次
                    for (let i = 0; i < 40; i++) {
                        const firework = document.createElement('div');
                        firework.className = 'firework';
                        firework.style.left = x + 'px';
                        firework.style.top = y + 'px';
                        
                        // 使用渐变色和不同大小
                        const colorIndex = Math.floor(i / 13);
                        firework.style.background = colorSet[colorIndex] || colorSet[0];
                        firework.style.width = (3 + Math.random() * 4) + 'px';
                        firework.style.height = firework.style.width;
                        firework.style.boxShadow = `0 0 15px ${colorSet[0]}`;

                        const angle = (Math.PI * 2 * i) / 40;
                        const velocity = 40 + Math.random() * 60;
                        const xVel = Math.cos(angle) * velocity;
                        const yVel = Math.sin(angle) * velocity;

                        firework.style.setProperty('--x', xVel + 'px');
                        firework.style.setProperty('--y', yVel + 'px');

                        container.appendChild(firework);

                        setTimeout(() => {
                            firework.remove();
                        }, 1200);
                    }
                    
                    // 添加烟花爆炸音效提示
                    if (round === 0) {
                        showTemporaryMessage('💥 烟花绽放！');
                    }
                }, round * 400);
            }
        }

        // 临时消息显示
        function showTemporaryMessage(message) {
            const msgEl = document.createElement('div');
            msgEl.textContent = message;
            msgEl.style.cssText = `
                position: fixed;
                top: 20%;
                left: 50%;
                transform: translateX(-50%);
                font-size: 24px;
                color: #fff;
                background: rgba(0,0,0,0.7);
                padding: 10px 20px;
                border-radius: 20px;
                z-index: 1002;
                pointer-events: none;
                animation: messageAppear 2s ease-out forwards;
            `;
            
            document.body.appendChild(msgEl);
            
            setTimeout(() => {
                msgEl.remove();
            }, 2000);
        }

        // 惊喜特效 - 心形烟花 + 飘落花瓣 + 彩虹特效
        function createRandomFireworks() {
            // 心形烟花
            createHeartFireworks();
            
            // 飘落花瓣
            setTimeout(() => {
                createFallingPetals();
            }, 500);
            
            // 彩虹特效
            setTimeout(() => {
                createRainbow();
            }, 1000);
            
            // 文字祝福特效
            setTimeout(() => {
                createFloatingText();
            }, 1500);
        }

        // 心形烟花
        function createHeartFireworks() {
            const container = document.getElementById('fireworks');
            const centerX = window.innerWidth / 2;
            const centerY = window.innerHeight / 3;

            // 心形路径点
            const heartPoints = [];
            for (let t = 0; t < 2 * Math.PI; t += 0.1) {
                const x = 16 * Math.pow(Math.sin(t), 3);
                const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
                heartPoints.push({x: x * 3, y: y * 3});
            }

            heartPoints.forEach((point, index) => {
                setTimeout(() => {
                    const firework = document.createElement('div');
                    firework.className = 'firework';
                    firework.style.left = (centerX + point.x) + 'px';
                    firework.style.top = (centerY + point.y) + 'px';
                    firework.style.background = '#ff69b4';
                    firework.style.width = '8px';
                    firework.style.height = '8px';
                    firework.style.boxShadow = '0 0 20px #ff69b4';
                    
                    firework.style.setProperty('--x', '0px');
                    firework.style.setProperty('--y', '0px');

                    container.appendChild(firework);

                    setTimeout(() => {
                        firework.remove();
                    }, 2000);
                }, index * 20);
            });
        }

        // 飘落花瓣
        function createFallingPetals() {
            const petals = ['🌸', '🌺', '🌷', '🌹', '💐', '🌻', '🌼'];
            
            for (let i = 0; i < 30; i++) {
                setTimeout(() => {
                    const petal = document.createElement('div');
                    petal.textContent = petals[Math.floor(Math.random() * petals.length)];
                    petal.style.cssText = `
                        position: fixed;
                        top: -50px;
                        left: ${Math.random() * window.innerWidth}px;
                        font-size: ${20 + Math.random() * 20}px;
                        z-index: 1000;
                        pointer-events: none;
                        animation: fallDown ${3 + Math.random() * 2}s linear forwards;
                    `;
                    
                    document.body.appendChild(petal);
                    
                    setTimeout(() => {
                        petal.remove();
                    }, 5000);
                }, i * 100);
            }
        }

        // 彩虹特效
        function createRainbow() {
            const rainbow = document.createElement('div');
            rainbow.style.cssText = `
                position: fixed;
                top: 20%;
                left: 50%;
                transform: translateX(-50%);
                width: 400px;
                height: 200px;
                background: linear-gradient(90deg, 
                    #ff0000, #ff8000, #ffff00, #00ff00, 
                    #0080ff, #0000ff, #8000ff);
                border-radius: 400px 400px 0 0;
                opacity: 0;
                z-index: 999;
                pointer-events: none;
                animation: rainbowAppear 3s ease-in-out forwards;
            `;
            
            document.body.appendChild(rainbow);
            
            setTimeout(() => {
                rainbow.remove();
            }, 3000);
        }

        // 浮动祝福文字
        function createFloatingText() {
            const messages = ['生日快乐！', '福如东海！', '寿比南山！', '心想事成！', '万事如意！'];
            const message = messages[Math.floor(Math.random() * messages.length)];
            
            const textEl = document.createElement('div');
            textEl.textContent = message;
            textEl.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 48px;
                color: #ff69b4;
                font-weight: bold;
                text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
                z-index: 1001;
                pointer-events: none;
                animation: textFloat 3s ease-out forwards;
            `;
            
            document.body.appendChild(textEl);
            
            setTimeout(() => {
                textEl.remove();
            }, 3000);
        }

        // 祝福语
        const blessings = [
            {
                title: '国庆祝福',
                content: '山河壮丽迎国庆，明月千里寄婷婷。愿君如这盛世华年，灿烂辉煌，前程似锦！'
            },
            {
                title: '中秋祝福',
                content: '但愿人长久，千里共婵娟。中秋月圆夜，恰逢君诞辰。愿君心如明月，澄澈皎洁，诸事圆满！'
            },
            {
                title: '生日祝福',
                content: '书卷多情似故人，晨昏忧乐每相亲。汉语言文学之才华横溢，愿君笔下生花，诗意人生！'
            },
            {
                title: '三节同庆',
                content: '国庆中秋生辰日，三喜临门福满堂。婷婷玉立如芝兰，才华馥郁满书香。愿君岁岁年年，平安喜乐！'
            }
        ];

        function showBlessing(index) {
            const popup = document.getElementById('blessingPopup');
            const overlay = document.getElementById('blessingOverlay');
            const title = document.getElementById('blessingTitle');
            const content = document.getElementById('blessingContent');

            const blessing = blessings[index - 1];
            title.textContent = blessing.title;
            content.textContent = blessing.content;

            overlay.classList.add('active');
            popup.classList.add('active');
            createFireworks();
        }

        function showAllBlessings() {
            const popup = document.getElementById('blessingPopup');
            const overlay = document.getElementById('blessingOverlay');
            const title = document.getElementById('blessingTitle');
            const content = document.getElementById('blessingContent');

            title.textContent = '💝 全部祝福 💝';
            
            // 创建更好的布局结构
            let blessingsHTML = '<div style="text-align: left; max-width: 100%;">';
            
            blessings.forEach((blessing, index) => {
                blessingsHTML += `
                    <div style="margin-bottom: 25px; padding: 15px; background: linear-gradient(135deg, #f8f9ff, #fff0f5); border-radius: 12px; border-left: 4px solid #c41e3a;">
                        <h3 style="color: #c41e3a; font-size: 18px; margin: 0 0 10px 0; text-align: center;">${blessing.title}</h3>
                        <p style="color: #333; font-size: 15px; line-height: 1.8; margin: 0; text-align: center;">${blessing.content}</p>
                    </div>
                `;
            });
            
            blessingsHTML += '</div>';
            blessingsHTML += '<div style="margin-top: 20px; padding: 15px; background: rgba(196, 30, 58, 0.1); border-radius: 12px; text-align: center;"><p style="color: #c41e3a; font-size: 16px; margin: 0; font-weight: bold;">🎊 愿所有美好都如约而至 🎊</p></div>';
            
            content.innerHTML = blessingsHTML;

            overlay.classList.add('active');
            popup.classList.add('active');
            createRandomFireworks();
        }

        function closeBlessing() {
            const popup = document.getElementById('blessingPopup');
            const overlay = document.getElementById('blessingOverlay');
            popup.classList.remove('active');
            overlay.classList.remove('active');
        }

        // 吹蜡烛
        let candlesBlown = false;
        function blowCandles() {
            if (!candlesBlown) {
                const flames = document.querySelectorAll('.flame');
                flames.forEach((flame, index) => {
                    setTimeout(() => {
                        flame.style.opacity = '0';
                    }, index * 200);
                });

                setTimeout(() => {
                    alert('🎉 许愿成功！愿李婷婷的所有心愿都能实现！🎂');
                    createRandomFireworks();
                }, 800);

                candlesBlown = true;
            } else {
                alert('蜡烛已经吹灭啦！愿望已经许下，一定会实现的！💫');
            }
        }

        // 音乐控制（自动播放，兼容移动端）
        let musicPlaying = false;
        let audio = null;

        function playMusic() {
            if (!audio) {
            audio = new Audio('resources/汪苏泷 – 生日快乐.mp3');
            audio.loop = true;
            }
            audio.play().then(() => {
            musicPlaying = true;
            updateMusicIcon();
            }).catch(() => {
            // 自动播放失败，等待用户交互
            musicPlaying = false;
            updateMusicIcon();
            });
        }

        function toggleMusic() {
            if (!audio) {
            audio = new Audio('resources/汪苏泷 – 生日快乐.mp3');
            audio.loop = true;
            }
            if (musicPlaying) {
            audio.pause();
            musicPlaying = false;
            } else {
            audio.play();
            musicPlaying = true;
            }
            updateMusicIcon();
        }

        function updateMusicIcon() {
            const icon = document.querySelector('.music-icon');
            icon.textContent = musicPlaying ? '🎵' : '🔇';
        }

        // 自动播放音乐，兼容移动端
        document.addEventListener('DOMContentLoaded', () => {
            playMusic();
        });

        // 兼容微信/部分移动端首次触摸自动播放
        document.addEventListener('touchstart', function oncePlay() {
            playMusic();
            document.removeEventListener('touchstart', oncePlay);
        }, { passive: true });

        // 兼容桌面端首次点击自动播放
        document.addEventListener('click', function oncePlay() {
            playMusic();
            document.removeEventListener('click', oncePlay);
        });

        // 页面点击烟花效果
        document.addEventListener('click', function(e) {
            if (e.target.tagName !== 'BUTTON' && 
                e.target.className !== 'close-btn' && 
                !e.target.closest('.lantern') && 
                !e.target.closest('.cake') &&
                !e.target.closest('.moon') &&
                !e.target.closest('.music-control')) {
                
                const container = document.getElementById('fireworks');
                const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffa500'];
                const color = colors[Math.floor(Math.random() * colors.length)];

                for (let i = 0; i < 10; i++) {
                    const firework = document.createElement('div');
                    firework.className = 'firework';
                    firework.style.left = e.clientX + 'px';
                    firework.style.top = e.clientY + 'px';
                    firework.style.background = color;

                    const angle = (Math.PI * 2 * i) / 10;
                    const velocity = 30 + Math.random() * 30;
                    const xVel = Math.cos(angle) * velocity;
                    const yVel = Math.sin(angle) * velocity;

                    firework.style.setProperty('--x', xVel + 'px');
                    firework.style.setProperty('--y', yVel + 'px');

                    container.appendChild(firework);

                    setTimeout(() => {
                        firework.remove();
                    }, 1000);
                }
            }
        });

        // 初始化
        createStars();

        // 自动烟花
        setInterval(() => {
            if (Math.random() > 0.7) {
                createFireworks();
            }
        }, 3000);

        // 欢迎提示
        window.addEventListener('load', () => {
            setTimeout(() => {
                alert('🎉 欢迎来到李婷婷的生日派对！\n\n🎂 点击蛋糕许愿\n🏮 点击灯笼查看祝福\n🌕 拖动月亮\n🎆 点击按钮放烟花\n✨ 点击页面任意处都会有惊喜！\n\n祝生日快乐，国庆中秋双节同庆！🎊');
            }, 500);
        });
    </script>
</body>
</html>
